<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="../../../CSS/reset.css"> -->
    <title>Document</title>
    <style>
        /*         
        上面的红线怎么完成？
        下面的小圆点怎么完成？
               水平线的颜色改不掉？？ 
                上面的线不是水平线，是上边框
               */


        * {
            margin: 0;
            padding: 0;
        }

        /* 
        .out {
            padding: 50px;
        }

        hr,
        li {
     
            color: rgb(180, 173, 173);
            width: 200px;
        }

        p {
            padding: 10px 0;
        }

        img {
            display: block;
            width: 200px;
            height: 200px;

        }

        ul {
            list-style: none;
        }

        li {
            margin-top: 5px;
            margin-bottom: 5px;
        } */

        .news-wrapper {
            width: 300px;
            height: 357px;
            margin: 50px auto;
            background-color: #bfa;
            /* 边框会影响整个盒子的大小，所以上边框1px,则整个高度就要-1；
            也可以用  box-sizing: border-box;
             */
            box-sizing: border-box;
            border-top: 1px solid rgb(211, 206, 206);
        }

        .news-title {
            height: 30px;
            /* line-height: 40px; */
            margin-top: 0;

            /* 要让文字多长，则上边框多长，那就要把标题文字设置成行内块元素显示； */
            display: inline-block;
            border-top: 1px solid red;
            /* 现在红色的边框没有压在灰色边框上，而是在灰色边框之下，所以需要将整个元素向上移动一像素； */
            margin-top: -1px;
            padding-top: 10px;

        }

        /* 设置title标题中 超链接中的样式 */
        .news-title a {
            text-decoration: none;
            color: #404040;
            font-size: 16px;
            font-weight: bold;
        }

        /* 设置图片的文字效果 */
        .news-img .img-title {
            margin-top: -30px;
            color: #fff;
            padding-left: 30px;
        }

        img {
            width: 300px;
            height: 150px;

        }
        /* .news-list {
            margin-top: 30px;
            list-style: square;
        } */
        
        ul{
            padding-left: 30px;
        }
        li::before {
            content: 'square';
        }
        /* 设置li 中的字体*/
        li {
            font-size: 16px;
            color: rgb(179, 167, 167);
        }
        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <div class="news-wrapper">
        <h2 class="news-title"><a href="#">体育</a></h2>
        <!-- 上面的h2是一个容器，所以图片也放在一个容器里，好处理一些；
            创建图片容器

        -->
        <div class="news-img">
            <a href="#">
                <img src="../../images/鲜花盛开.jpg" alt="鲜花盛开">
                <h3 class="img-title">费德勒</h3>
            </a>
        </div>
        <a href="#"></a>
        <ul class="news-list">
            <li>
                <a>乔治</a>
            </li>
            <li>
                <a>格林</a>
            </li>
            <li>
                <a>塔克</a>
            </li>
            <li>
                <a>新春</a>
            </li>
        </ul>
    </div>

    <!-- <div class="out">
        <hr>
        <p><strong>体育</strong></p>
        <div class="inner1">
            <img src="../../images/鲜花盛开.jpg" alt="鲜花盛开">
            <div class="inner2">
                <ul>
                    <li>乔治</li>
                    <li>格林</li>
                    <li>塔克</li>
                    <li>新春</li>
                </ul>
            </div>
        </div>
    </div> -->
</body>

</html>